<template>
	<view class="zy-column-full">
		<y-title title="详情"></y-title>
		<scroll-view class="zy-scroll zy-ph-lg" scroll-y>
			<view class="top">
				<image :src="entity.headPicUrl" mode="aspectFill"></image>
				<view class="top-content">
					<view class="title">{{entity.genius}}</view>
					<view class="sub-title">{{entity.sign}}</view>
				</view>
			</view>
			<view class="score-price">
				<view class="item">
					<view>
						<text class="big">{{entity.score}}</text>分
					</view>
					<view style="color: #9097C7;">最近服务1人</view>
				</view>
				<view class="item">
					<view style="color:#888">
						<text class="big">{{entity.money}}</text>/景点
					</view>
					<view style="color: #9097C7;">每小时</view>
				</view>
			</view>

			<view class="tag">
				<view class="tag-item">
					<view class="label">景点价格:</view>
					<view class="content">{{entity.money+"/每小时"}}</view>
				</view>
				<view class="tag-item">
					<view class="label">擅长景点:</view>
					<view class="content">{{entity.scenic}}</view>
				</view>
				<view class="tag-item">
					<view class="label">可选位置:</view>
					<view class="content">{{entity.area}}</view>
				</view>
			</view>

			<view class="banner">
				<view class="label">打卡景点</view>
				<swiper :indicator-dots="true" :autoplay="true" :circular="true">
					<swiper-item v-for="(item,index) in entity.tripPicUrls">
						<image :src="item"></image>
					</swiper-item>
				</swiper>
			</view>

		</scroll-view>

		<view class="bottom">
			<y-button content='联系客服' @click.native="toChat"></y-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	
	const _this = getCurrentInstance()
	const entity = ref({})

	onLoad(() => {
		const eventChannel = _this.ctx.getOpenerEventChannel();
		eventChannel.on('sendData', res => {
			entity.value = res;
		})
	})

	const toChat = (item : any) => {
		uni.showModal({
			title: '客服',
			content: `客服QQ：2778027813 工作时间9：00-18：00`
		})
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		flex-direction: row;
		height: 180rpx;
		margin-top: 30rpx;
		background-color: #26252B;
		border-radius: 20rpx;

		image {
			width: 200rpx;
			height: 100%;
			border-radius: 20rpx;
		}

		.top-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			padding: 20rpx 0;

			.title {
				font-size: 36rpx;
				color: #F2B77A;
				font-weight: bold;
			}

			.sub-title {
				font-size: 28rpx;
				color: #555;
			}
		}
	}

	.score-price {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		justify-content: center;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 30rpx;
			margin: 0 15rpx;
			background-color: rgba(200, 205, 220, 0.5);
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #555;
			text-align: center;

			.big {
				font-size: 36rpx;
				color: #222;
				font-weight: bold;
			}
		}
	}

	.tag {
		display: flex;
		flex-direction: column;
		margin: 30rpx 0;

		.tag-item {
			display: flex;
			flex-direction: row;
			margin: 10rpx 0;

			.label {
				font-size: 28rpx;
				color: #888;
			}

			.content {
				font-size: 28rpx;
				color: #555;
				margin-left: 10rpx;
			}
		}
	}

	.banner {
		display: flex;
		flex-direction: column;

		.label {
			font-size: 36rpx;
			color: #888;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		swiper-item {
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}
		}
	}

	.bottom {
		margin: 30rpx 0;
	}
</style>